<template>
  <!-- 订单签字确认 -->
  <view class="order-confirm">
    <view class="main">
      <view class="tabs-box">
        <u-tabs
          :list="tabTitleList"
          active-color="#FBB000"
          inactive-color="#666"
          font-size="28"
          :is-scroll="false"
          bar-height="8"
          bar-width="110"
          :height="100"
          :duration="0.2"
          :current="current"
          @change="tabChange"
        ></u-tabs>
      </view>

      <view class="wrap">
        <!-- 扫码确认 -->
        <view v-show="current === 0" class="tab-content">
          <view class="title">客户使用7迈车APP/微信扫码确认</view>

          <view class="content">
            <view class="text">客户登录手机号：{{ phone }}</view>
            <view class="qr-code">
              <image :src="qrcode" mode="widthFix" class="img"></image>
            </view>
          </view>
        </view>

        <!-- 远程确认 -->
        <view v-show="current === 1" class="tab-content">
          <view class="title">给客户发送短信</view>

          <view class="content">
            <view class="phone-num">
              <i-icon type="m" icon="icongouxuan" size="40rpx"></i-icon>
              <text class="num">{{ phone }}</text>
            </view>
            <!-- <input type="text" > -->
          </view>
        </view>
      </view>
    </view>

    <!-- 确认发送按钮 -->
    <view v-show="current === 1" class="btn-send">
      <button class="btn-bg-yellow" @click="sendMsg">确认发送</button>
    </view>

    <!-- 底部固定按钮 -->
    <!-- <view v-show="current === 0" class="btn-box flex flex-ai-c">
      <view class="btn" @click="goSignaturePage()">
        <i-button
          text="手动签字确认"
          bg-color="#333"
          color="#FFE23E"
          shape="circleLeft"
        ></i-button>
      </view>
      <view class="btn" @click="submit()">
        <i-button
          text="客户已扫码确认"
          color="#333"
          shape="circleRight"
        ></i-button>
      </view>
    </view> -->
    <!-- 弹框提示 -->
    <u-popup
      v-model="tipShow"
      mode="center"
      :mask="true"
      width="400"
      :mask-close-able="false"
      border-radius="30"
    >
      <view class="popup-content">
        <u-image
          src="/static/img/afterSales/signPopup.png"
          shape="circle"
          class="popup-img"
          width="234"
          height="204"
        ></u-image>
        <view class="title">客户确认成功</view>
        <view class="content">客户已完成确认</view>
        <view class="btn-box">
          <button class="btn" @click="submit">我知道了</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'

export default {
  components: { iButton },
  data() {
    return {
      datas: {},
      // tab标题
      tabTitleList: [
        { name: '扫码确认' },
        { name: '远程确认' },
        { name: '签字确认' },
      ],
      current: 0, // 当前tab
      qrcode: '',
      timer: null,
      tipShow: false,
    }
  },

  computed: {
    orderParams() {
      return this.$store.state.afterSales.signData
    },

    phone() {
      return this.$store.state.afterSales.arrvialPhone
    },
  },

  onLoad(e) {
    this.backPress = true
    this.datas = JSON.parse(e.typeOptions)
    this.getSignQrcode()
  },

  onShow() {
    if (!this.timer) {
      this.timer = setInterval(() => {
        this.checkStatus()
      }, 2000)
    }
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },

  methods: {
    //获取签字二维码
    getSignQrcode() {
      this.$api.afterSales
        .getSignQrcode({
          id: this.orderParams.id,
          type: this.orderParams.type,
        })
        .then((res) => {
          this.qrcode = res.data.id
        })
        .catch((err) => {
          console.log(err)
        })
    },

    tabChange(i) {
      if (i === 2) {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        if (this.orderParams.type === 2) {
          //交车报告签字
          this.goSignaturePage()
        } else {
          this.gotoConfirm()
        }
      } else {
        this.current = i
      }
      console.log(this.current)
    },

    //客户确认
    gotoConfirm() {
      const str = JSON.stringify(this.datas)
      uni.navigateTo({
        url: '/pages_afterSales/confirmRepair/confirmRepair?typeOptions=' + str,
      })
    },

    // 跳转到签字页
    goSignaturePage() {
      const str = JSON.stringify(this.datas)
      if (this.orderParams.figure) {
        //客户签字

        uni.navigateTo({
          url: '/pages_afterSales/signature/signature?typeOptions=' + str,
        })
      } else {
        //技师签字
        uni.navigateTo({
          url:
            '/pages_afterSales/signature/signature?title=技师签字&typeOptions=' +
            str,
        })
      }
    },

    // 确认扫码
    submit() {
      uni.$emit('userConfirm', {
        userName: '已确认',
      })
      uni.navigateBack({
        delta: this.datas.count - 1,
      })
    },

    //发送短信
    sendMsg() {
      this.$api.afterSales
        .sendSMS({
          order_Arrive_Store_Id: this.orderParams.id,
          type: this.orderParams.type,
          mobile: this.phone,
        })
        .then((res) => {
          uni.showToast({
            title: '短信发送成功',
            duration: 2000,
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: this.datas.count - 1,
            })
          }, 2000)
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //签字状态查询
    async checkStatus() {
      try {
        let res = await this.$api.afterSales.getSignatureStatus({
          order_Arrive_Store_Id: this.orderParams.id,
          type: this.orderParams.type,
        })
        if (res.data) {
          clearInterval(this.timer)
          this.timer = null
          this.tipShow = true
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.order-confirm {
  background-color: #f4f4f4;
  min-height: 100%;
}

.main {
  padding: 24rpx;

  .tabs-box {
    background: #ffffff;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .tab-content {
    padding: 0 20rpx;
    margin-top: 14rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .title {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 26rpx;
      color: #999999;
      text-align: center;
      border-bottom: 1px solid #eee;
    }

    .content {
      .text {
        padding: 50rpx 0;
        font-size: 30rpx;
        color: #333333;
        text-align: center;
      }

      .qr-code {
        padding: 0 100rpx 80rpx;

        .img {
          width: 100%;
        }
      }
    }

    // 远程确认 - 手机号
    .phone-num {
      height: 118rpx;
      line-height: 118rpx;

      .i-icon {
        vertical-align: middle;
      }

      .num {
        margin-left: 20rpx;
        vertical-align: middle;
        font-size: 32rpx;
        color: #333;
      }
    }
  }
}

// 发送按钮
.btn-send {
  padding: 0 24rpx;

  button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    margin: 100rpx 0 0;
    font-size: 32rpx;
    color: #333;
  }
}

// 底部按钮
// .btn-box {
//   position: fixed;
//   bottom: 0;
//   z-index: 6;
//   width: 100%;
//   height: 120rpx;
//   padding: 0 24rpx;
//   background-color: #fff;

//   .btn {
//     width: 50%;

//     .i-button {
//       width: 100%;
//     }
//   }
// }

// 提示弹框
.popup-content {
  position: relative;
  flex-direction: column;
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
    padding-top: 130rpx;
  }

  .popup-img {
    position: absolute;
    top: -45rpx;
    left: 50%;
    margin-left: -117rpx;
  }

  .content {
    padding: 30rpx 0 46rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }

  .btn-box {
    .btn {
      height: 78rpx;
      width: 240rpx;
      font-size: 30rpx;
      color: #333;
    }
  }
}

.order-confirm {
  & /deep/ .u-drawer__scroll-view .uni-scroll-view .uni-scroll-view {
    overflow: visible !important;
  }

  & /deep/ .u-mode-center-box {
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.14);
    border-radius: 20rpx;
    overflow: visible !important;
  }

  button {
    background: linear-gradient(-90deg, #fbd220, #ffe23e);
    border-radius: 44rpx;

    &::after {
      border: 0;
    }
  }
}
</style>
